<template>
  <div class="monthly">
      <div class="title" :class="{ fixed: fixed }">
        <div class="back">
          <!-- <van-icon name="arrow-left" @click="$router.push('/home')" /> -->
          <van-icon name="arrow-left" @click="$router.back()" />
        </div>
        <div class="title-tabs" v-show="fixed">
          本月上新
      
        </div>
      </div>
    <div class="bgimg">
        <img src="http://www.higuang365.com/public/images/common/promotion/news1.jpg"/>
        <!-- <img  src="https://gw.alicdn.com/imgextra/i1/O1CN01g1Z1MB231ol6cVZkV_!!6000000007196-2-tps-1125-446.png?getAvatar=avatar" alt=""> -->
        <!-- <img  src="https://gw.alicdn.com/imgextra/i2/O1CN01g3XTls1lofxhjHWZQ_!!6000000004866-2-tps-1089-270.png?getAvatar=avatar_110x10000.jpg_.webp" alt=""> -->
        
    </div>
    <GoodsList/>
  </div>
</template>
<script >
import { reactive, toRefs ,nextTick} from "vue";
import GoodsList from "@/components/promotion/monthlyGood.vue";
export default ({
    
    name:'monthly',
    components:{
        GoodsList
    },
  setup() {
    const data = reactive({
         fixed: false
    });

     nextTick(() => {
      document.getElementById("app").addEventListener("scroll", () => {
        const scrollTop = document.getElementById("app").scrollTop;
        data.fixed = Math.abs(Math.round(scrollTop)) < 300 ? false : true;
      });
    });

    return { ...toRefs(data) };
  },
});
</script>
<style lang="scss" scoped>
.monthly {
       min-height: 100vh;
       background: #79cffe;
    img{
            display: block;
    }
  .title {
    position: fixed;
    top: 0;
    display: flex;
    width: 100%;
    height: 5rem;
    line-height: 5rem;
    z-index: 100;
    color: #fff;
  }
  .back {
    position: absolute;
    left: 2rem;
    font-size: 2rem;
  }
  .title-tabs {
    margin: auto;
    font-size: 1.8rem;
    font-weight: bold;
  }


  .fixed {
        background-image: url('http://www.higuang365.com/public/images/common/promotion/news1.jpg');
    background-size: cover;
    transition: background 0.5s cubic-bezier(0.39, 0.58, 0.57, 1);
  }
}

</style>
